<script>
import {getCourseImage} from "@/utils/getCourseImage";
import {fetchCourseInfo} from "@/api/getCourseInfo";

export default {
  name: "courseAside",
  data() {
    return {
      courseImg:'',
      courseName:this.$route.query.courseName,
      courseId: this.$route.params.courseId,
    }
  },
  methods: {
    getCourseImage,
    fetchCourseInfo,
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    // 使用封装好的API获取课程图片
    async fetchImage() {
      try {
        const res = await fetchCourseInfo(this.courseId);
        // console.log(res);
        this.courseImg = res.course_img;
        this.courseName = res.course_name;
      } catch (error) {
        this.$message.error(error.message);  // 显示错误消息
      }
    },
  },
  created() {
    this.fetchImage();

    console.log(this.courseImg)
  }
}
</script>

<template>
  <div class="aside-container">
    <div><el-image :src="getCourseImage(courseImg)" fit="cover"></el-image></div>
    <div class="course-title">
      {{ courseName }}
    </div>
    <el-menu
        :default-active="`/courses/${courseId}/practice`"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        router
    >
      <el-menu-item :index="`/courses/${courseId}/practice`">
        <span slot="title">练习模式</span>
      </el-menu-item>
      <el-menu-item :index="`/courses/${courseId}/memoryInfo?courseName=${courseName}`">
        <span slot="title">背题模式</span>
      </el-menu-item>
      <el-menu-item :index="`/courses/${courseId}/myMistakeQuestion`">
        <span slot="title">我的错题</span>
      </el-menu-item>
      <el-menu-item :index="`/courses/${courseId}/myCollection`">
        <span slot="title">我的收藏</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<style scoped>
.aside-container {
  overflow: hidden;
  width: 200px;
  top: 100px;
  color: #333;
  text-align: center;
  z-index: 999;
  position: fixed;
  height: calc(-120px + 100vh);
}
.aside-container .el-image {
  width: 138px;
  height: 68px;
  border-radius: 8px;
}
.aside-container .el-image:hover{
  opacity: 0.7;
  cursor: pointer;
}
.course-title {
  font-size: 16px;
  text-align: center;
  width: 100%;
  line-height: 21px;
  margin-top: 12px;
  color: #131B26;
}
</style>
